<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>支付页面</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none;
            }
            .countdown-warning {
                animation: pulse 1.5s infinite;
            }
            @keyframes pulse {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.6; }
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans min-h-screen flex items-center justify-center p-4 md:p-6">
<div class="w-full max-w-md">
    <!-- 支付卡片 -->
    <div class="bg-white rounded-xl card-shadow overflow-hidden transition-all duration-300 hover:shadow-lg">
        <!-- 顶部标题区 -->
        <div class="bg-blue-600 text-white p-5">
            <h2 class="text-xl font-bold flex items-center">
                <i class="fa fa-credit-card mr-2"></i>确认支付
            </h2>
        </div>

        <!-- 商品信息区 -->
        <div class="p-5 border-b border-gray-100">
            <h3 class="text-lg font-semibold text-gray-800 mb-1">${param.name}</h3>
            <p class="text-gray-500 text-sm mb-3">商品ID: ${param.gid}</p>
            <div class="flex justify-between items-center">
                <span class="text-gray-600">应付金额</span>
                <span class="text-2xl font-bold text-red-600">¥${param.price}</span>
            </div>
        </div>

        <!-- 倒计时区 -->
        <div class="p-4 bg-amber-50 border-b border-amber-100 flex items-center">
            <i class="fa fa-clock-o text-amber-600 mr-3 text-lg"></i>
            <div>
                <p class="text-sm text-gray-600">订单将在以下时间后自动取消</p>
                <p id="countdown" class="text-red-600 font-bold text-lg countdown-warning">30:00</p>
            </div>
        </div>

        <!-- 地址填写区 -->
        <div class="p-5 border-b border-gray-100">
            <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                <i class="fa fa-map-marker text-gray-500 mr-2"></i>收货地址
            </h3>

            <div class="space-y-4">
                <div>
                    <label for="recipient" class="block text-sm font-medium text-gray-700 mb-1">收货人</label>
                    <input type="text" id="recipient" class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus transition-all" placeholder="请输入收货人姓名">
                </div>

                <div>
                    <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">联系电话</label>
                    <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus transition-all" placeholder="请输入联系电话">
                </div>

                <div>
                    <label for="address" class="block text-sm font-medium text-gray-700 mb-1">详细地址</label>
                    <textarea id="address" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus transition-all" placeholder="请输入详细收货地址"></textarea>
                </div>

                <button id="saveAddress" class="text-blue-600 text-sm font-medium hover:text-blue-800 transition-colors flex items-center">
                    <i class="fa fa-save mr-1"></i> 保存地址
                </button>
            </div>
        </div>

        <!-- 支付按钮区 -->
        <div class="p-5">
            <a href="${pageContext.request.contextPath}/api/alipay/pay?oid=${oid}&name=${name}&paymoney=${paymoney}"
               id="payButton"
               class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded-lg transition-all duration-300 flex items-center justify-center">
                <i class="fa fa-check-circle mr-2"></i> 确认支付
            </a>
            <a href="javascript:history.back()"><button id="cancelOrder" class="w-full mt-3 bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded-lg transition-all duration-300">
                取消订单
            </button></a>
        </div>
    </div>

    <!-- 底部提示 -->
    <p class="text-center text-gray-500 text-sm mt-4">
        支付安全由<a href="#" class="text-blue-600 hover:underline">支付宝</a>提供保障
    </p>
</div>

<script>
    // 倒计时功能
    function startCountdown(duration, display) {
        let timer = duration, minutes, seconds;
        const countdownInterval = setInterval(function () {
            minutes = parseInt(timer / 60, 10);
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            display.textContent = minutes + ":" + seconds;

            // 剩余5分钟时增加视觉提醒
            if (timer <= 300) {
                display.classList.add('text-red-700');
            }

            if (--timer < 0) {
                clearInterval(countdownInterval);
                // 倒计时结束，自动取消订单
                cancelOrder();
            }
        }, 1000);
    }

    // 取消订单函数
    function cancelOrder() {
        // 显示倒计时结束信息
        document.getElementById('countdown').textContent = "已超时";
        document.getElementById('countdown').classList.add('text-red-800');

        // 禁用支付按钮
        const payButton = document.getElementById('payButton');
        payButton.classList.remove('bg-blue-600', 'hover:bg-blue-700');
        payButton.classList.add('bg-gray-400', 'cursor-not-allowed');
        payButton.removeAttribute('href');
        payButton.textContent = "订单已取消";

        // 可以在这里添加AJAX请求，通知服务器取消订单
        console.log("订单已自动取消");

        // 显示提示信息
        alert("订单已超时，已自动取消");
    }

    // 保存地址功能
    document.getElementById('saveAddress').addEventListener('click', function() {
        const recipient = document.getElementById('recipient').value;
        const phone = document.getElementById('phone').value;
        const address = document.getElementById('address').value;

        if (!recipient || !phone || !address) {
            alert('请填写完整的收货信息');
            return;
        }

        // 简单的手机号验证
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(phone)) {
            alert('请输入有效的手机号');
            return;
        }

        // 可以在这里添加AJAX请求保存地址
        alert('地址保存成功');

        // 保存到本地存储，实际应用中应该保存到服务器
        localStorage.setItem('shippingAddress', JSON.stringify({
            recipient: recipient,
            phone: phone,
            address: address
        }));
    });

    // 取消订单按钮事件
    document.getElementById('cancelOrder').addEventListener('click', function() {
        if (confirm('确定要取消订单吗？')) {
            cancelOrder();
        }
    });

    // 页面加载完成后初始化
    window.onload = function () {
        // 30分钟倒计时（以秒为单位）
        const thirtyMinutes = 30 * 60,
            display = document.querySelector('#countdown');
        startCountdown(thirtyMinutes, display);

        // 从本地存储加载地址（如果有）
        const savedAddress = localStorage.getItem('shippingAddress');
        if (savedAddress) {
            const address = JSON.parse(savedAddress);
            document.getElementById('recipient').value = address.recipient;
            document.getElementById('phone').value = address.phone;
            document.getElementById('address').value = address.address;
        }
    };
</script>
</body>
</html>
